<script setup lang="ts">
import { ref } from "vue";
const activeList = [
  { value: 10, color: "#F56C6C", label: "取消" },
  { value: 20, color: "#E6A23C", label: "延期" },
  { value: 40, color: "#409EFF", label: "按期完成" },
  { value: 5, color: "#909399", label: "尚未开展" }
];
import financeDialog from "./financeDialog.vue";
const financeDialogRef = ref("");
import goalDialog from "./goalDialog.vue";
const goalDialogRef = ref("");
import { QuestionFilled } from "@element-plus/icons-vue";
import unfoldDialog from "./unfoldDialog.vue";
const unfoldDialogRef = ref("");
</script>

<template>
  <el-descriptions :column="2" border class="mt-[30px]">
    <el-descriptions-item label="项目目标完成情况" width="170px" :span="2">
      <template #label>
        项目目标完成情况
        <!-- <el-text class="mx-1" type="primary"></el-text> -->
      </template>
      <el-progress
        :percentage="25"
        :stroke-width="15"
        striped
        class="w-2/3 py-[30px]"
      />
    </el-descriptions-item>
    <el-descriptions-item label="" width="170px" :span="2">
      <template #label>
        <el-text
          class="mx-1 cursor-pointer"
          type="primary"
          @click="unfoldDialogRef.openDrawer()"
          >项目产出完成情况
          <el-icon class="relative top-[-5px] left-[5px]"
            ><QuestionFilled
          /></el-icon>
        </el-text>
      </template>
      <ul class="flex w-2/3 rounded-[5px] relative overflow-hidden">
        <li
          class="text-center text-white text-[14px]"
          v-for="item in activeList"
          :style="{
            background: item.color,
            width: (item.value / 75) * 100 + '%'
          }"
        >
          {{ item.value }}
        </li>
      </ul>
      <ul class="mt-[20px]">
        <li
          v-for="item in activeList"
          class="flex items-center text-[14px] mb-[5px]"
        >
          <span
            :style="{ background: item.color }"
            class="w-[6px] h-[6px] rounded-[5px] inline-block"
          ></span>
          <span class="pl-[5px] inline-block">{{ item.label }}</span
          >:{{ item.value }}个
        </li>
      </ul>
    </el-descriptions-item>
    <el-descriptions-item label="项目活动开展情况" width="170px" :span="2">
      <template #label>
        <el-text
          class="mx-1 cursor-pointer"
          type="primary"
          @click="goalDialogRef.openDrawer()"
          >项目活动开展情况
          <el-icon class="relative top-[-5px] left-[5px]"
            ><QuestionFilled
          /></el-icon>
        </el-text>
      </template>
      <el-progress type="circle" :percentage="70" />
    </el-descriptions-item>
    <el-descriptions-item label="项目财务情况" width="170px">
      <template #label>
        <el-text
          class="mx-1 cursor-pointer"
          type="primary"
          @click="financeDialogRef.openDrawer()"
          >项目财务情况
          <el-icon class="relative top-[-5px] left-[5px]"
            ><QuestionFilled
          /></el-icon>
        </el-text>
      </template>
      <el-progress :percentage="90" :stroke-width="15" striped class="w-2/3" />
      <ul class="mt-[20px]">
        <li class="flex text-[14px]">总预算：¥200000</li>
        <li class="flex text-[14px]">已支出：¥190000</li>
        <li class="flex text-[14px]">结余：¥10000</li>
        <li class="flex text-[14px]">超支：1项</li>
      </ul>
    </el-descriptions-item>
  </el-descriptions>
  <financeDialog ref="financeDialogRef" />
  <goalDialog ref="goalDialogRef" />
  <unfoldDialog ref="unfoldDialogRef" />
</template>

<style lang="scss" scoped></style>
